<template>
    <div class="home-singer">
        <h3>热门歌手</h3>

        <div class="wrapper" ref="wrapper">
            <ul  class="content" ref="content">
                <li v-for="(item, index) in listData" :key="index">
                    <div class="cover">
                        <van-image :src="item.singer_pic" radius="1rem"/>
                    </div>
                    <span>{{ item.singer_name }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { betterScrollHorizontal } from '../../common/betterScroll.js';

export default{
    data(){
        return{
            listData: [],
        };
    },

    created(){
        this.getListData();
    },

    mounted:{
        getListData(){
            this.$request("get","/singer/list")
            .then((res) => {
                console.log(res);
                if(res.result == 100){
                    this.listData = res.data.list.silce(0,12);
                }

                betterScrollHorizontal(
                     this,
                        this.$refs.wrapper,
                        this.$refs.content,
                        this.listData.length,
                        10
                    );
            });
        },
    },
};
</script>


<style scoped>
.wrapper{
    width: 100%;
    overflow: hidden;
}

ul.content li {
    width: 10rem;
    display: inline-block;
    vertical-align: top;
}

ul.content li > span{
    font-size: 12px;
    color: rgb(87, 83, 83);
}
</style>